<template>
    <div>
        <div class="navBox">
            <div class="nav" :class="{'active': active == 0}" @click="jump(0)">
                总计
            </div>
            <span class="line">
                
            </span>
            <div class="nav" :class="{'active': active == 1}" @click="jump(1)">
                近一年
            </div>
            <span class="line">
                
            </span>
            <div class="nav" :class="{'active': active == 2}" @click="jump(2)">
                近一月
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'headNav',
    data() {
        return {
            active: 0
        }
    },
    mounted () {
        this.$emit('getRank', this.active)
    },
    methods:{
        jump (num) {
            this.active = num
            this.$emit('getRank', this.active)
        }
    }
}
</script>
<style lang='less' scoped>
    .navBox{
        float: right;
        text-align: center;
        width: 3.7rem;
        clear: both;
        background: #fff;
        .nav{
            float: left;
            position: relative;
            display: block;
            height: 0.52rem;
            line-height: 0.52rem;
            color: #666;
            font-size: 0.26rem;
            text-align: center;
            width: 1.22rem;
            border-radius: 0.1rem;
        }
        .active{
            color: #fff;
            background: #128FEF;
        }
        .line{
            float: left;
            display: block;
            background: #E5E5E5;
            width: 0.02rem;
            height: 0.26rem;
            margin-top: 0.12rem;
        }
    }

</style>